Like any kind of apps, JavaScript apps also have to be written well. Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.
Check if a value is an Array
We can use the Array.isArray method to check if a value is an array.
For instance, we can write:
const arr = [1, 2, 3];
Array.isArray(arr);
Then the isArray method returns true since arr is an array.
Join 2 Arrays
There are multiple ways to join multiple arrays.
One way is the spread operator. For instance, we can write:
const arr = [...arr1, ...arr2];
Given than arr1 and arr2 are arrays, we used the spread operator to spread the array entries from both one after the other.
We can also use the concat method to concatenate 2 arrays.
For instance, we can write:
const arr = arr1.concat(arr2);
The concat method also returns an array.
Therefore, arr has the same value as the first example.
Join 2 Strings
There are a few ways to join 2 strings together.
We can use the + operator to concatenate 2 strings.
For instance, we can write:
const fullName = firstName + lastName;
Then the 2 strings are combined together with the + operator.
The += operator adds a second string to the first.
For instance, we can write:
name += lastName;
Then we concatenate lastName to name .
Like arrays, strings also have the concat method.
For instance, we can write:
const fullname = firstName.concat(lastName);
firstName is concatenated with lastName and then return a new string.
So fullName would have the concatenated string.
Run JavaScript Code from a Link
If we want to run JavaScript code from a link, then we cal set the value of the href attribute by using javascript:void(0) .
Then in the handler then we can write our JavaScript code.
For instance, we can write the following HTML:
<a href="javascript:void(0)" onclick="handleClick()">click me</a>
Then in our JavaScript file, we can write:
const handleClick = () => {
alert('clicked');
return false;
}
We return false in our handleClick function so that the browser won’t scroll back to the top when the function is run.
let and var Variables
There are great differences between let and var variables.
let creates variables that are block-scoped.
var creates a variable that is function scoped. They’re also hoisted.
Block-scoped variables are only available within the block, which is what we want most of the time.
There won’t be any confusion with block scoped.
The hoisting feature of var variables are confusing, and their value is sometimes not what we expect.
Don’t Modify Built-in Prototypes
We should never modify object prototypes.
If we modify them, then we’ll get unexpected results since people don’t expect us to change the prototypes.
If we want to add functionality, we should just create and modify our own code.
There may be conflicts if we modify built-in prototypes.
Add an Item to a Specific Index
To add an item to a specific index, we can use the splice method to add an entry to an array with the given index.
For instance, if we have:
const colors = ['green', 'red'];
and we want to insert 'orange' into index 1, we can write:
colors.splice(1, 0, '`orange`');
The first argument is the starting index that we want to change.
0 means that we don’t want to delete anything.
'orange' is the item we want to insert between 'green' and 'red' .
splice changes an array in place, so we get that colors is [“green”, “orange”, “red”] .
If we want to add multiple entries in between 'green' and 'red' , we can write:
colors.splice(1, 0, 'orange', 'blue');
We just pass in as many arguments as we want after the 2nd one to insert them all into the position we want.
So colors would be [“green”, “orange”, “blue”, “red”] .
Conclusion
We can run code from a link by setting the href value to javascript:void(0) so we can run code that we want by attaching handlers to event handling attributes.
With splice , we can add items starting at a specific index.
There are multiple ways to join 2 strings or arrays together.
